<template>
  <view class="orderAdd">
    <view class="block">
      <view class="block-title">
        接单人
      </view>
      <view class="block-item">
        <view class="label">部门</view>
        <view class="block-item-fr flex align-center" @click="openPicker">
          <text class="styles" :class="receive_area_name?'ipt':''">{{receive_area_name?receive_area_name:'请选择'}}</text>
          <image class="arrow" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 24rpx;background: #f5f5f5;"></view>
    <view class="block">
      <view class="block-title">
        客户信息
      </view>
      <view class="block-item">
        <view class="label">客户名称</view>
        <view class="block-item-fr flex align-center">
          <input class="ipt" type="text" v-model="formLine.connect_name" placeholder-class="styles" placeholder="请输入" />
          <image class="arrow" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-item">
        <view class="label">联系类型</view>
        <view class="block-item-fr flex align-center" @click="openPicker2">
          <text class="styles" :class="connect_type_name?'ipt':''">{{connect_type_name?connect_type_name:'请选择'}}</text>
          <image class="arrow" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-item">
        <view class="label">联系方式</view>
        <view class="block-item-fr flex align-center">
          <input class="ipt" type="text" v-model="formLine.connect_information" placeholder-class="styles"
            placeholder="请输入" />
          <image class="arrow" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-item">
        <view class="label">客户来源</view>
        <view class="block-item-fr flex align-center" @click="openPicker3">
          <text class="styles" :class="source_type_name?'ipt':''">{{source_type_name?source_type_name:'请选择'}}</text>
          <image class="arrow" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 24rpx;background: #f5f5f5;"></view>
    <view class="block">
      <view class="block-title" style="margin-bottom: 50rpx;">
        其他信息
      </view>
      <view class="block-warp">
        <view class="block-warp-tp">
          <view class="tp-fl">
            备注
          </view>
          <view class="tp-fr">
            {{formLine.source_remark.length}}/200
          </view>
        </view>
        <textarea class="textareaIpt" maxlength="200" v-model="formLine.source_remark" placeholder="请输入"
          placeholder-style="styles"></textarea>
      </view>
      <view class="block-warp">
        <view class="block-warp-tp" style="margin: 48rpx 0 24rpx 0">
          <view class="tp-fl">
            上传聊天记录（{{formLine.source_images.length}}/9)
          </view>
        </view>
        <UploadImgs :imgList="imgList" keyName="source_images" @getUrl="getUrl" />
      </view>
      <view style="width: 100%;height: 100rpx;"></view>
    </view>
    <view class="footer">
      <view class="btn" @click="onSave">
        发布
      </view>
    </view>
    <uv-picker ref="picker" :columns="columns" keyName="title" @confirm="confirm"></uv-picker>
    <uv-picker ref="picker2" :columns="columns2" keyName="title" @confirm="confirm2"></uv-picker>
    <uv-picker ref="picker3" :columns="columns3" keyName="title" @confirm="confirm3"></uv-picker>
    <uv-popup ref="popup" :closeOnClickOverlay="false">
      <view class="dialog">
        <view class="dialog-title">
          客服重复
        </view>
        <view class="dialog-warpp">
          <view class="dialog-warpp-item">
            <view class="label">
              电话：
            </view>
            <view class="value">
              {{repeatData.connect_information}}
            </view>
          </view>
          <view class="dialog-warpp-item">
            <view class="label">
             客户名称：
            </view>
            <view class="value">
              {{repeatData.connect_name}}
            </view>
          </view>
          <view class="dialog-warpp-item">
            <view class="label">
             创建时间：
            </view>
            <view class="value">
              {{repeatData.created_at}}
            </view>
          </view>
          <view class="dialog-warpp-item">
            <view class="label">
             接单人：
            </view>
            <view class="value">
              {{repeatData.receive_username}}
            </view>
          </view>
        </view>
        <view class="foot-btn" @click="handleOk">
          确定
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        formLine: {
          source_images: [],
          receive_area_id: "",
          connect_name: "",
          connect_type: "",
          connect_information: "",
          source_type: "",
          source_remark: ""
        },
        receive_area_name: "",
        connect_type_name: "",
        source_type_name: "",
        columns: [],
        // 联系类型
        columns2: [
          [{
              title: "电话",
              id: 1
            },
            {
              title: "微信",
              id: 2
            },
            {
              title: "QQ",
              id: 3
            },
            {
              title: "其他",
              id: 4
            }
          ]
        ],
        // 来源
        columns3: [
          [{
              title: "淘宝",
              id: 1
            },
            {
              title: "百度",
              id: 2
            },
            {
              title: "自拓",
              id: 3
            },
            {
              title: "其他",
              id: 4
            }
          ]
        ],
        repeatData: {
          connect_information: "",
          connect_name: "",
          created_at: "",
          receive_username: "",
        }
      }
    },
    onLoad() {
      this.getDeptList();
      
    },
    methods: {
      handleOk(){
        this.$refs.popup.close();
      },
      onSave() {
        reqApi.createOrder(this.formLine).then(res => {
          uni.showToast({
            title: "发布成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            uni.reLaunch({
              url: "/pages/order/orderList"
            })
          }, 1500)
        }).catch(err=>{
          console.log("客服重复", err.data);
          this.repeatData = err.data;
          console.log("repeatData", this.repeatData);
          this.$refs.popup.open('center');
        })
      },
      getDeptList() {
        reqApi.deptList({}).then(res => {
          console.log("部门列表", res);
          this.columns.push(res.data);
        })
      },
      confirm(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.receive_area_id = id;
        this.receive_area_name = title;
      },
      confirm2(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.connect_type = id;
        this.connect_type_name = title;
      },
      confirm3(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.source_type = id;
        this.source_type_name = title;
      },
      openPicker() {
        this.$refs.picker.open();
      },
      openPicker2() {
        this.$refs.picker2.open();
      },
      openPicker3() {
        this.$refs.picker3.open();
      },
      getUrl(e) {
        console.log("子组件传过来的", e);
        const {
          keyName,
          arr
        } = e;
        this.formLine[keyName] = arr;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dialog{
    width: 600rpx;
    padding: 48rpx 28rpx 0 28rpx;
    box-sizing: border-box;
    .dialog-title{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #1071E7;
      text-align: center;
    }
    .dialog-warpp{
      margin: 50rpx 0;
      .dialog-warpp-item{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .label{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #969799;
        }
        .value{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #323233;
        }
      }
    }
    .foot-btn{
      width: 100%;
      height: 88rpx;
      background: #1071E7;
      border-radius: 44rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }
  .textareaIpt {
    width: 100%;
    padding: 24rpx 0;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eee;
  }

  .block-warp {
    .block-warp-tp {
      display: flex;
      justify-content: space-between;

      .tp-fl {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #323233;
      }

      .tp-fr {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #969799;
      }
    }
  }

  .styles {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #969799;
  }

  .ipt {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #222;
    text-align: right;
  }

  .orderAdd {
    width: 100vw;
    height: calc(100vh - 88rpx);
    background: #fff;

    .block {
      padding: 30rpx;
      background: #fff;

      .block-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #323233;
      }

      .block-item {
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;

        .label {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #323233;
        }

        .block-item-fr {
          flex: 1;
          justify-content: flex-end;
          display: flex;

          .arrow {
            width: 48rpx;
            height: 48rpx;
          }

        }
      }
    }
  }
</style>